<template>
	<el-table :data="$store.state.app.list" :height="tableHeight" :max-height="tableHeight" 
		size="small" border highlight-current-row
		style="width: 100%">
		<el-table-column type="index" label="序号" width="50"></el-table-column>
		<el-table-column label="用户名" prop="username"></el-table-column>
		<el-table-column label="姓名" prop="realname"></el-table-column>
		<el-table-column label="角色">
			<template slot-scope="scope">
				<el-tag v-for="(roleId, i) in scope.row.roleIds" style="margin-right: 5px; margin-bottom: 2px;" :key="roleId">
					{{$store.state.config.roleMap[roleId].roleName}}
				</el-tag>
			</template>
		</el-table-column>
		<el-table-column min-width="200" align="right" :render-header="renderHeaderModify">
			<template slot-scope="scope">
				<el-button size="mini" @click="$emit('edit', scope.row)" v-permission="['sys:user:edit']">编辑
					<i class="el-icon-edit-outline"></i>
				</el-button>
				<el-button size="mini" @click="$emit('remove', scope.row)" type="danger" v-permission="['sys:user:remove']">删除
					<i class="el-icon-delete"></i>
				</el-button>
				<el-button size="mini" @click="$emit('assignRoles', scope.row)" v-permission="['sys:user:assignRoles']">分配角色</el-button>
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
import store from '@/store';
import cfg from './js/';
import Page from '@/components/permission/Page.js';

export default {
	store: cfg.store,
	data() {
		return {};
	},
	methods: {
		add() {
			this.$emit('add');
		},
		addWiseduUser() {
			this.$emit('addWiseduUser');
		},
		renderHeaderModify() {
			const directives = [{
				name: "permission", value: ['sys:user:add']
			}];
			return (
				<div>
					<el-button size="mini" type="primary" plain onClick={this.add} 
						{...{directives}}>添加系统用户
						<i class="el-icon-plus"></i>
					</el-button>
					<el-button size="mini" type="primary" plain onClick={this.addWiseduUser} 
						{...{directives}}>添加统一认证用户
						<i class="el-icon-plus"></i>
					</el-button>
				</div>
			)
		}
	},
	computed: {
		tableHeight() {
			return window.innerHeight - 200;
		}
	}
}
</script>